<template>
<el-row class="row-video">
    <!-- 当天看 -->
    <el-col>
        <h3 style="margin-bottom: 20px;">今日看</h3>
        <el-carousel :interval="4000" type="card" height="340px">
            <el-carousel-item v-for="(item, index) in dataList" :key="index">
                <div :body-style="{ padding: '0px'}">
                    <el-link :href="item.href" target="_blank">
                        <img :src="item.img" width="200" height="259" class="image">
                    </el-link>
                    <div style="padding: 14px;">
                        <span>{{ item.name }}</span>
                        <div class="bottom clearfix">
                        <time class="time">{{ item.updateTime }}</time>
                        <!-- <el-button type="text" class="button">操作按钮</el-button> -->
                        </div>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </el-col>
    <!-- 电影 -->
    <el-col>
        <h3 style="margin-bottom: 20px;">电影</h3>
        <el-col :offset="1" class="video-card" v-for="(item, index) in dataList" :key="index">
            <el-card :body-style="{ padding: '0px'}">
                <el-link :href="item.href" target="_blank">
                    <img :src="item.img" width="200" height="259" class="image">
                </el-link>
                <div style="padding: 14px;">
                    <span>{{ item.name }}</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ item.updateTime }}</time>
                    <!-- <el-button type="text" class="button">操作按钮</el-button> -->
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-col>
    <!-- 电视剧 -->
    <el-col>
        <h3 style="margin-bottom: 20px;">电视剧</h3>
        <el-col :offset="1" class="video-card" v-for="(item, index) in dataList" :key="index">
            <el-card :body-style="{ padding: '0px'}">
                <el-link :href="item.href" target="_blank">
                    <img :src="item.img" width="200" height="259" class="image">
                </el-link>
                <div style="padding: 14px;">
                    <span>{{ item.name }}</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ item.updateTime }}</time>
                    <!-- <el-button type="text" class="button">操作按钮</el-button> -->
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-col>
    <!-- 动漫 -->
    <el-col>
        <h3 style="margin-bottom: 20px;">动漫</h3>
        <el-col :offset="1" class="video-card" v-for="(item, index) in dataList" :key="index">
            <el-card :body-style="{ padding: '0px'}">
                <el-link :href="item.href" target="_blank">
                    <img :src="item.img" width="200" height="259" class="image">
                </el-link>
                <div style="padding: 14px;">
                    <span>{{ item.name }}</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ item.updateTime }}</time>
                    <!-- <el-button type="text" class="button">操作按钮</el-button> -->
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-col>
</el-row>
</template>

<script>

import { getVideos } from '../api/videos'

export default {
    name: 'videos',
    data() {
        return {
            dataList: []
        };
    },
    created(){
        this.getVideosList()
    },
    methods: {
        getVideosList(){
            let that = this
            getVideos().then(res =>{
                that.dataList = res.data
            })
        }
    }
}
</script>

<style scoped>
/* 卡片轮播 */
    .el-carousel__item {
        /* width: 200px !important; */
         /* margin: auto; */
         text-align: center;
    }
    .el-carousel__item >>> .el-card {
        /* opacity: 0; */
        background-color: rgba(0, 0, 0, 0);
        border: 0;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 340px;
        margin: 0;
    }
    .el-carousel__item:nth-child(2n) { 
        background-color: rgba(0, 0, 0, 0);
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: rgba(0, 0, 0, 0);
    }

/* 板块 */
    .row-video {
        width: 65%;
        margin-top: 3%;
    }
    .video-card {
        display: flex !important;
        width: 200px;
        height: 340px;
        margin-bottom: 40px;
    }
    .time {
        
        width: 300px;
        font-size: 13px;
        color: #999;
    }
  
    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    /* .image {
        width: 100%;
        display: block;
    } */

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
  
    .clearfix:after {
        clear: both
    }
</style>